<template>
  <!-- 资金详情 -->
  <div class="app-container">
    <!-- 操作按钮 -->
    <div class="overtable-btns">
      <el-button size="mini" type="warning" icon="el-icon-back">返回</el-button>
    </div>
    <div class="block"></div>
    <ul class="account-head">
      <li class="item" v-for="item in headDetail" :key="item.title">
        <p>{{item.title}}</p>
        <p>{{item.data}}</p>
      </li>
    </ul>
    <!-- 数据统计 -->
    <div class="data-statistics">
      <el-card shadow="hover" class="data-item">
        <p>总营业额</p>
        <p>12562</p>
      </el-card>
      <el-card shadow="hover" class="data-item">
        <p>退款总额</p>
        <p>12562</p>
      </el-card>
      <el-card shadow="hover" class="data-item">
        <p>退款冻结</p>
        <p>12562</p>
      </el-card>
      <el-card shadow="hover" class="data-item">
        <p>累计结算</p>
        <p>12562</p>
      </el-card>
      <el-card shadow="hover" class="data-item">
        <p>待结算额</p>
        <p>12562</p>
      </el-card>
      <el-card shadow="hover" class="data-item">
        <p>账户余额</p>
        <p>12562</p>
        <el-button size="mini" type="primary" @click="toWithFreeze">提现冻结</el-button>
        <el-button size="mini" type="primary" @click="toAdjustBalance">余额调整</el-button>
      </el-card>
      <el-card shadow="hover" class="data-item">
        <p>已提现额</p>
        <p>12562</p>
      </el-card>
    </div>
    <div class="block"></div>
    <!--表格渲染-->
    <div class="tab-table">
      <el-tabs type="border-card" v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="收款记录" name="1">
          <pay-record />
        </el-tab-pane>
        <el-tab-pane label="退款记录" name="2">
          <refund-record />
        </el-tab-pane>
        <el-tab-pane label="待结算订单" name="3">
          <awaitsettle-record />
        </el-tab-pane>
        <el-tab-pane label="结算记录" name="4">
          <settle-record />
        </el-tab-pane>
        <el-tab-pane label="提现记录" name="5">
          <withdrawal-record />
        </el-tab-pane>
        <el-tab-pane label="余额调整记录" name="6">
          <adjust-record />
        </el-tab-pane>
      </el-tabs>
    </div>
    <div class="dialog-wrap">
      <!-- 提现冻结弹窗 -->
      <el-dialog title="提现冻结" :append-to-body="true" :visible.sync="freVis" width="400px">
        <el-alert title="涉及敏感操作，请确认操作秘钥" type="warning" show-icon :closable="false"></el-alert>
        <div style="margin-top: 10px">
          <el-input v-model.trim="freezePw" placeholder="请输入操作秘钥（6-10位数字）" />
        </div>
        <div slot="footer" class="dialog-footer">
          <el-button>取 消</el-button>
          <el-button type="primary">确 定</el-button>
        </div>
      </el-dialog>
      <!-- 余额调整弹窗 -->
      <el-dialog title="余额调整" :append-to-body="true" :visible.sync="balVis" width="600px">
        <el-form
          class="form-wrap adjust-dialog"
          :model="adjustForm"
          size="small"
          label-width="120px"
        >
          <el-form-item label="会员账号:">
            <p>121212121212</p>
          </el-form-item>
          <el-form-item label="调整类型:">
            <el-select v-model="adjustForm.adjType" placeholder="调整类型" clearable>
              <el-option
                v-for="item in adjustType"
                :key="item.key"
                :label="item.display_name"
                :value="item.key"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="调整金额:">
            <el-input v-model.trim="adjustForm.adjustNum" placeholder="请输入数字（小数点后2位）" clearable />
          </el-form-item>
          <el-form-item label="调整备注:">
            <el-input
              v-model.trim="adjustForm.adjustRemark"
              type="textarea"
              :rows="4"
              resize="none"
              maxlength="200"
              placeholder="请输入调整备注（200字以内）"
              clearable
            />
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button>取 消</el-button>
          <el-button type="primary">确 定</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import checkPermission from '@/utils/permission'
import payRecord from './components/payRecord'
import refundRecord from './components/refundRecord'
import awaitsettleRecord from './components/awaitSettleRecord'
import settleRecord from './components/settleRecord'
import withdrawalRecord from './components/withdrawalRecord'
import adjustRecord from './components/adjustBalanceRecord'
export default {
  components: {
    payRecord,
    refundRecord,
    awaitsettleRecord,
    settleRecord,
    withdrawalRecord,
    adjustRecord
  },
  data() {
    return {
      freVis: false,
      balVis: false,
      activeName: '1',
      tempName: 'payRecord',
      freezePw: '',
      adjustForm: {
        adjType: '',
        adjustNum: '',
        adjustRemark: ''
      },
      headDetail: [
        { title: '商户名称：', data: '11' },
        { title: '商户号：', data: '11' },
        { title: '门店数量：', data: '11' }
      ],
      adjustType: [
        { key: 1, display_name: '增加' },
        { key: 0, display_name: '减少' }
      ]
    }
  },
  methods: {
    handleClick(tab, event) {
      // console.log(tab, event)
    },
    // 提现冻结触发弹窗
    toWithFreeze() {
      this.freVis = true
    },
    // 余额调整触发弹窗
    toAdjustBalance() {
      this.balVis = true
    }
  }
}
</script>

<style lang="scss" scoped>
.el-card__body {
  padding: 0 !important;
}
.tab-table {
  margin-top: 10px;
}
.adjust-dialog {
  .el-select,
  .el-input,
  .el-textarea {
    width: 80%!important;
    // margin-right: 10px;
  }
}
</style>
